<!-- 商品详情 -->
<template>
	<view class="detail-wrap">
		<!-- 标题栏 -->
		<view class="nav-box">
			<view class="state-hack"></view>
			<view :style="{ height: navbarHeight + 'px' }">
				<view hover-class="back-hover" class="back-box u-m-x-30 u-flex u-row-center u-col-center" @tap="goBack">
					<view class="u-iconfont uicon-arrow-left" style="color: #fff;font-size: 28rpx;"></view>
				</view>
			</view>
		</view>

		<!-- 缺省页 -->
		<shopro-empty v-if="showEmpty" :image="$IMG_URL + '/imgs/empty/empty_goods_null.png'" :tipText="showEmptyText"
			btnText="返回上一页" @click="$Router.back()"></shopro-empty>
		<view class="detail_box" v-else>
			<view class="detail-content">
				<!-- 轮播 -->
				<u-swiper :height="750" borderRadius="0" :list="goodsInfo.banner" indicator-pos="bottomRight"
					mode="number" :interval="3000" @click="onGoodsSwiper">
				</u-swiper>

				<!-- 标题 -->
				<view class="title-box u-p-20 u-skeleton-fillet">
					<view class="goods-title u-m-b-10 u-ellipsis-2">{{ goodsInfo.title }}</view>
					<view class="sub-title u-ellipsis-2">{{ goodsInfo.subtitle }}</view>
				</view>
				<!-- 价格卡片组 -->
				<sh-price-card v-if="goodsInfo.id" :detail="goodsInfo" :type="detailType"
					@change="getActivityRules"></sh-price-card>

				<!-- 规格选择 -->
				<view class="sku-box" @tap="addCart()" v-if="goodsInfo.is_spec == 1">
					<view class="u-flex u-row-between u-col-center">
						<view class="u-flex">
							<text class="title">规格</text>
							<text class="tip">{{ currentSkuText || '请选择规格' }}</text>
						</view>
						<text class="u-iconfont uicon-arrow-right" style="color: #bfbfbf;"></text>
					</view>
					<view class="sku-pics u-flex u-row-between">
						<view class="images">
							<u-image v-for="(it,index) in goodsInfo.property.sku_list" :key="index" width="72rpx" height="72rpx" border-radius="10"
								:src="$IMG_URL + it.image"></u-image>
						</view>
						<view class="text">共{{goodsInfo.property.sku_list.length}}种规格可选</view>
					</view>
				</view>


				<view class="tab-detail u-p-20 u-m-b-10">
					<view class="u-font-28 u-m-b-30">商品详述：</view>
					<!-- 详情富文本 -->
					<view class="rich-box " v-if="tabCurrent === 'tab0'">
						<u-parse :html="goodsInfo.content"></u-parse>
					</view>
				</view>
			</view>

			<!-- 商品foot -->
			<view class="" v-if="!skuKey">
				<view class="tabbar-foot safe-area-inset-bottom" v-if="goodsInfo.id">
					<view class="detail-foot_box safe-area-inset-bottom  u-flex">
						<!-- 正常按钮 -->
						<view class="detail-btn-box u-flex u-row-around" v-if="!goodsInfo.activity_type">
							<button class=" u-reset-button tool-btn add-btn" @tap="addCart">加入购物车</button>
							<button class=" u-reset-button tool-btn pay-btn" @tap="goPay">立即购买</button>
						</view>
					</view>
				</view>
			</view>

			<!-- 规格弹窗 -->
			<vk-data-goods-sku-popup ref="skuPopup" v-model="skuKey" border-radius="20" :localdata="goodsInfos"
				:mode="skuMode" @open="onOpenSkuPopup" @close="onCloseSkuPopup" @add-cart="addCarts" @buy-now="buynow"
				add-cart-background-color='#f00'></vk-data-goods-sku-popup>
			

			<!-- 登录 -->
			<shopro-auth-modal v-if="authType"></shopro-auth-modal>
		</view>
	</view>
</template>

<script>
	let systemInfo = uni.getSystemInfoSync();
	import shPriceCard from './components/sh-price-card.vue';
	import {
		BASE_URL,
		API_URL
	} from '@/env.js';
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {
			shPriceCard
		},
		data() {
			return {
				shows:true,
				// navbar
				backIconName: 'arrow-left',

				showSku: false, //是否显示规格弹窗
				currentSkuText: '', //选中规格
				detailType: 'score',
				showShare: false,
				buyType: 'sku',
				grouponBuyType: 'alone', //拼团购买方式。
				showEmpty: false,
				showEmptyText: '',
				showServe: false,
				goodsInfo: {},
				commentList: [], //商品评价列表
				commentNum: 0, //商品评价总数
				favorite: false,
				activityRules: {},
				currentSkuList: [],
				confirmGoodsInfo: {},
				swiperCurrent: 0, //轮播下标
				tabCurrent: 'tab0',
				tabList: [{
						id: 'tab0',
						title: '商品详情'
					},
					{
						id: 'tab1',
						title: '规格参数'
					},
					{
						id: 'tab2',
						title: '用户评价'
					}
				],
				base_url: BASE_URL,
				// 是否打开SKU弹窗
				skuKey: false,
				// SKU弹窗模式
				skuMode: 1,
				goodsInfos:{}
				// 后端返回的商品信息
			};
		},
		// 是否登录
		computed: {
			...mapGetters(['isLogin', 'authType', 'cartList', 'checkCart']),
			navbarHeight() {
				// #ifdef APP-PLUS || H5
				return 48;
				// #endif
				// #ifdef MP
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				return height;
				// #endif
			}
		},
		async onLoad() {
			let that = this;
			this.backIconName = getCurrentPages().length > 1 ? 'arrow-left' : 'home-fill';
			//const type = this.$Route.query.type;
			//this.detailType = type;
			await this.getGoodsDetail();
			/* switch (type) {
				case 'score':
					await this.getScoreDetail();
					break;
				default:
					await this.getGoodsDetail();
			} */
			this.isCart() && this.getCartSku();
		},
		onShow() {
			this.isLogin && this.getCartList();
		},
		methods: {
			...mapActions(['getCartList', 'changeCartList']),
			// 检测是否为购物车商品
			isCart() {
				let id = this.$Route.query.id;
				return Object.keys(this.checkCart).includes(id);
			},
			buynow(e) {
				console.log(e);
				// return
				let that = this;
				let confirmcartList = [];
				confirmcartList.push({
					goods_id: that.goodsInfo.id,
					price: that.goodsInfo.price ? that.goodsInfo.price : 0,
					number: e.buy_num,
					goods_title: that.goodsInfo.title,
					thumb: that.goodsInfo.thumb,
					option_title:e.title
				});
				console.log(confirmcartList);
				// return
				that.jump('/pages/order/confirm', {
					goodsList: confirmcartList,
					from: 'buy',
					spec_id: e.specs,
				});
				// this.shopChange(e.specs, e.buy_num,e.market_price,e.title)
			},
			onOpenSkuPopup() {
				console.log("监听 - 打开sku组件");

			},
			onCloseSkuPopup() {
				console.log("监听 - 关闭sku组件");
			},
			//打开规格
			showGoodDetailModal() {
				this.goodsInfos = this.goodsInfo.property
				this.skuKey = true;
			},
			async addCarts(selectShop){
				console.log("监听 - 加入购物车", selectShop);
				
				
				let that = this
				that.$http('cart.add', {
					goods_id: selectShop.goodsid,
					number: selectShop.buy_num,
					specs: selectShop.specs,
				}).then((res)=>{
					if (res.code == 1) {
						uni.showToast({
							icon: 'none',
							title: '添加成功！'
						})
					
					
						setTimeout(function() {
							that.skuKey = false;
						}, 300);
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg,
						})
					}
				})
				
				
			},
			// goBack
			// 微信直播商品跳转详情，需要用小程序原生接口才能返回。
			goBack() {
				let pageList = getCurrentPages();
				if (pageList.length > 1) {
					// #ifdef MP-WEIXIN
					wx.navigateBack();
					// #endif
					// #ifndef MP-WEIXIN
					uni.navigateBack();
					// #endif
				} else {
					this.$Router.pushTab('/pages/index/index');
				}
			},

			// 轮播图预览
			onGoodsSwiper(e) {
				this.$tools.previewImage(this.goodsInfo.images, e);
			},
			getActivityRules(e) {
				if (e) {
					this.activityRules = JSON.parse(e);
				}
			},
			// 检测
			checkActivity(data, type) {
				if (data) {
					return !data.includes(type);
				}
				return true;
			},
			// 路由跳转
			jump(path, parmas) {
				this.showShare = false;
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			// 回到首页
			goHome() {
				this.$Router.pushTab('/pages/index/index');
			},

			// 选项卡
			onTab(id) {
				this.tabCurrent = id;
			},
			// 积分详情
			getScoreDetail() {
				let that = this;
				return new Promise((resolve, reject) => {
					that.$http('goods.scoreDetail', {
						id: that.$Route.query.id
					}).then(res => {
						if (res.code === 1) {
							that.goodsInfo = res.data;
							resolve(res.data);
						}
						if (res.code == 0) {
							resolve(false);
							that.$u.toast(res.msg);
						}
					});
				});
			},
			// 商品详情
			getGoodsDetail() {
				let that = this;
				return new Promise((resolve, reject) => {
					that.$http(
						'goods.detail', {
							id: that.$Route.query.id
						},
						'',
						false
					).then(res => {
						if (res.code === 1) {
							that.showEmpty = false;
							that.goodsInfo = res.data;
							var array = res.data.thumb.split(',');
							that.goodsInfo.banner = []
							for (let i = 0; i < array.length; i++) {
								let a = that.base_url + array[i]
								that.goodsInfo.banner.push(a)
							}
							if (that.goodsInfo.activity_type) {
								that.activityRules.status = that.goodsInfo.activity.status_code;
							}
							resolve(res.data);
						} else {
							resolve(false);
							// that.$u.toast(res.msg);
							that.showEmpty = true;
							that.showEmptyText = res.msg;
						}
					});
				});
			},
			// 从购物车数据里找当前商品的sku
			getCartSku() {
				let that = this;
				let goods_id = Number(that.$Route.query.id);
				// 使用 find 方法查找特定 goods_id 的数据项
				const cartItem = that.cartList.find(item => item.goods_id === goods_id);
				// 检查是否找到该项，并相应处理
				if (cartItem) {
					//console.log('找到的商品数据项:', cartItem);
					// 在这里你可以访问 cartItem 进行其他操作
					this.currentSkuText = cartItem.sku_price.goods_sku_text
				} else {
					//console.log('没有找到指定的商品数据项');
				}
			},
			// 组件返回的type;
			changeType(e) {
				this.buyType = e;
				console.log(e);
			},
			// 组件返回的规格;
			getSkuText(e) {
				this.currentSkuText = e;
			},
			// 加入购物车
			addCart() {
				this.buy_tit = '加入购物车'
				this.showGoodDetailModal()
				return
				if (this.isLogin) {
					this.buyType = 'cart';
					this.showSku = true;
				} else {
					this.$store.dispatch('showAuthModal');
				}
				console.log(this.buyType);
			},
			// 立即购买
			goPay() {
				
				this.buy_tit = '立即购买'
				this.showGoodDetailModal()
				return

				// if (this.isLogin) {
				// 	this.buyType = 'buy';
				// 	this.showSku = true;
				// } else {
				// 	this.$store.dispatch('showAuthModal');
				// }
			}
		}
	};
</script>

<style lang="scss">
	// 标题栏
	.nav-box {
		position: fixed;
		width: 100%;
		min-height: 140rpx;
		z-index: 888;
		top: 0;

		.back-box {
			background-color: rgba(#000, 0.18);
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-top: 14rpx;
		}

		.back-hover {
			background-color: rgba(#fff, 0.18);
		}

		.state-hack {
			width: 100%;
			height: var(--status-bar-height);
			/* #ifdef H5 */
			height: 20rpx;
			/* #endif */
		}
	}

	// 拼团玩法
	.groupon-play {
		background: #fff;
		line-height: 94rpx;

		.title {
			font-size: 28rpx;
			color: #999;
		}

		.description {
			font-size: 28rpx;
			width: 500rpx;
			margin-left: 30rpx;
		}
	}

	// 选项卡
	.tab-box {
		height: 102rpx;
		background: #fff;
		border-bottom: 1rpx solid rgba(#dfdfdf, 0.8);
		margin-top: 10rpx;

		.tab-item {
			flex: 1;
			height: 100%;
			position: relative;
			font-size: 30rpx;
			font-weight: bold;

			.tab-line {
				width: 123rpx;
				height: 4rpx;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				background: transparent;
				position: absolute;
				z-index: 2;
			}

			.line-active {
				background: rgba(168, 112, 13, 1);
			}
		}
	}

	// 选项卡内容
	.tab-detail {
		min-height: 300rpx;
		background: #fff;

		// 规格参数
		.goods-size {
			.table-box {
				width: 710rpx;
				margin: auto;
				background: rgba(255, 255, 255, 1);
				border: 1rpx solid rgba(223, 223, 223, 1);

				.t-tr {
					border-bottom: 1rpx solid rgba(223, 223, 223, 1);

					&:last-child {
						border-bottom: none;
					}

					.t-head {
						font-size: 26rpx;
						color: #999;
						flex: 1;
						padding: 15rpx 20rpx;
						height: 100%;
					}

					.t-detail {
						font-size: 26rpx;
						border-left: 1rpx solid rgba(223, 223, 223, 1);
						flex: 4;
						padding: 15rpx 20rpx;
						height: 100%;
					}
				}
			}
		}

		// 富文本
		.rich-box {
			/deep/ img {
				display: block;
			}
		}

		// 评论
		.goods-comment {
			.more-box {
				height: 100rpx;
				background: #fff;

				.more-btn {
					width: 200rpx;
					line-height: 60rpx;
					border: 1rpx solid rgba(213, 166, 90, 1);
					border-radius: 30rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(168, 112, 13, 1);
					padding: 0;
					background: #fff;
				}
			}
		}
	}

	// 规格卡片
	.sku-box {
		line-height: 82rpx;
		background: #fff;
		padding: 0 20rpx;
		margin: 30rpx 0;
		font-size: 28rpx;

		.title {
			color: #999;
			margin-right: 20rpx;
		}

		.sku-pics {
			padding-bottom: 20rpx;

			.images {
				display: flex;
				overflow-x: auto;
				margin-right: 30rpx;

				.u-image {
					flex-shrink: 0;
					border-radius: 10rpx;
					margin-right: 20rpx;
					border: 2rpx solid #E77817;
					overflow: hidden;
					margin-right: 18rpx;
				}
			}

			.text {
				flex-shrink: 0;
				color: #7F7C7C;
				font-size: 28rpx;
				padding: 0 32rpx;
				border-radius: 10rpx;
				background-color: #E8E7E7;
			}
		}
	}

	// 标题卡片
	.title-box {
		background-color: #fff;

		.goods-title {
			font-size: 32rpx;
			font-weight: 400;
			line-height: 42rpx;
		}

		.sub-title {
			font-size: 24rpx;
			font-weight: 500;
			line-height: 42rpx;
		}
	}

	// 底部工具栏
	.tabbar-foot {
		min-height: 100rpx;
		width: 100%;
	}

	.detail-foot_box {
		min-height: 100rpx;
		border-top: 1rpx solid rgba(238, 238, 238, 1);
		background-color: #fff;
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 999;

		.left,
		.detail-right {
			flex: 1;
		}

		.tools-item {
			flex: 1;
			height: 100%;

			.tool-img {
				width: 46rpx;
				height: 46rpx;
			}

			.tool-title {
				font-size: 22rpx;
				line-height: 22rpx;
				padding-top: 8rpx;
			}
		}

		.detail-btn-box {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 30rpx;
			width: calc(100% - 60rpx);
			margin: auto;

			.tool-btn {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(#fff, 0.9);
				min-height: 80rpx;
				border-radius: 50rpx;
				padding: 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				flex: 1;

				.price {
					font-size: 24rpx;
					line-height: 24rpx;
					font-weight: bold;
					color: rgba(#fff, 0.9);
				}

				.price-title {
					font-size: 20rpx;
					line-height: 20rpx;
					font-weight: 500;
					color: rgba(#fff, 0.9);
					padding-top: 8rpx;
				}
			}

			.add-btn {
				background: #F84141;
			}

			.pay-btn {
				background: #E77817;
			}
		}
	}
</style>